<template>
  <div class="app-container">
    <div class="head-container">
      <div v-if="searchToggle">
        <label class="el-form-item-label">up主</label>
        <el-input v-model="query.owner" clearable placeholder="up主" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="toQuery"/>
        <label class="el-form-item-label">视频标题</label>
        <el-input v-model="query.title" clearable placeholder="视频标题" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="toQuery"/>
        <label class="el-form-item-label">分集标题</label>
        <el-input v-model="query.part" clearable placeholder="分集标题" style="width: 185px;" class="filter-item"
                  @keyup.enter.native="toQuery"/>
        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索
        </el-button>
      </div>
      <div class="crud-opts">
        <span class="crud-opts-left">
          <el-button
            type="primary"
            class="filter-item"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="toChecked"
            :disabled="multipleSelection == null || (multipleSelection.length === 0)">
            选定
          </el-button>
          <el-button
            type="warning"
            class="filter-item"
            size="mini"
            icon="el-icon-remove-outline"
            @click="toDelete()"
            :disabled="multipleSelection == null || (multipleSelection.length === 0)">
            取消
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <el-badge :value="checkedCnt">
            <el-button
              type="success"
              class="filter-item"
              size="mini"
              icon="el-icon-s-opportunity"
              @click="toDelete()">
              开始转换
            </el-button>
          </el-badge>
        </span>
        <el-button-group class="crud-opts-right">
          <el-button
            size="mini"
            plain
            type="info"
            icon="el-icon-search"
            @click="searchToggle = !searchToggle"
          />
          <el-button
            size="mini"
            icon="el-icon-refresh"
            @click="toQuery()"
          />
        </el-button-group>
      </div>
      <el-table
        ref="table"
        :data="tableData"
        border size="small"
        style="width: 100%;"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column fixed prop="cid" width="130" label="视频cid" align="center"/>
        <el-table-column prop="page" label="分集" width="100" align="center"/>
        <el-table-column prop="owner" label="up主" align="center"/>
        <el-table-column prop="title" label="视频标题" align="center"/>
        <el-table-column prop="part" label="分集名称" align="center"/>
        <el-table-column prop="cover" label="封面" width="150" align="center">
          <template slot-scope="scope">
            <el-image
              referrerPolicy="no-referrer"
              lazy
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
              fit="contain"/>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

import item from "@/layout/components/Sidebar/Item";

const defaultForm = {
  id: null,
  date: null,
  name: null,
  province: null,
  city: null,
  address: null,
  zip: null
}
export default {
  created() {
    this.toQuery()
  },
  data() {
    return {
      tableData: [{
        cid: 254464113,
        owner: '黑马Java',
        cover: 'http://i0.hdslb.com/bfs/archive/6dd9173d4ffb0bb1e026c913c911ab05c34c276b.jpg',
        title: 'Kubernetes(K8S) 入门进阶实战完整教程，黑马程序员K8S全套教程（基础+高级）',
        page: 1,
        part: '1-应用部署方式演变',
        checked: false
      }, {
        cid: 481837101,
        owner: '森1996',
        cover: 'http://i1.hdslb.com/bfs/archive/9d85ade696a547071d8e6c76534265d82ea3dcde.jpg',
        title: '漠河舞厅2022（伴奏+字幕）',
        page: 1,
        part: '漠河舞厅2022（伴奏+字幕）',
        checked: false
      }],
      pop: false,
      query: {
        name: '',
        uuid: '',
        area: '',
        location: ''
      },
      formTitle: '',
      fromVisible: false,
      form: {},
      multipleSelection: [],
      checkedCnt: 0,
      paging: {
        size: 5,
        page: 0,
        sort: "id,desc"
      },
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 5
      },
      loading: false,
      searchToggle: true
    }
  },
  methods: {
    /** 增删改查按钮触发 */
    toQuery() {
      // 查询数据
      // test1.get(this.query).then(res => {})
      // this.accountPage.total = res.data.totalElements
      this.pagination.total = 2
      this.checkedCnt = 0;
      this.tableData.forEach(item => {
        if (item.checked) {
          this.checkedCnt++
        }
      });
    },
    toAdd() {
      // 开始添加数据前
      this.formTitle = "添加数据"
      this.form = JSON.parse(JSON.stringify(defaultForm))
      this.fromVisible = true
    },
    toEdit(row) {
      // 开始编辑数据前
      this.formTitle = "编辑数据"
      if (row) {
        this.form = JSON.parse(JSON.stringify(row))
      } else {
        this.form = JSON.parse(JSON.stringify(this.multipleSelection[0]))
      }
      this.fromVisible = true
    },
    toChecked() {
      // 添加解析任务
      this.checkedVideoJob = this.multipleSelection.map(item => {
        return item.cid
      });
    },
    toDelete(row) {
      // 删除数据前
      this.checkedVideoJob = this.multipleSelection.filter(item => {
        return this.checkedVideoJob.contains(item);
      })
      console.log(this.checkedVideoJob)
    },
    doSubmit() {
      // 添加数据
      console.log('提交', this.form);
      this.fromVisible = false
    },
    doDelete(row) {
      // 删除数据
      row.pop = false
      console.log('删除', row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.paging.size = val
      this.pagination.pageSize = val
      this.toQuery()
    },
    handleCurrentChange(val) {
      this.paging.page = val - 1
      this.pagination.currentPage = val
      this.toQuery()
    },
    /**-------*/

    /** 自定义方法 */

    /**-------*/
  },
}
</script>

<style>
.crud-opts {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}

.crud-opts .crud-opts-right span {
  float: left;
}
</style>
